<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <svg viewBox="0 0 100 100" width="400" height="400">

        <circle cx="30" cy="30" r="10" fill="#f00">
            <animate 
                attributeType="XML"
                attributeName="cx"
                from="30" 
                to="60"
                dur="1s"
                repeatCount="1"
                fill="freeze"/>
        </circle>

    </svg>

    <svg viewBox="0 0 100 100" width="400" height="400">

        <circle cx="30" cy="30" r="10" fill="#f00"></circle>
        
        <circle id="c2" cx="30" cy="60" r="10" fill="#00f"></circle>



        <animate 
            href="#c2"
            attributeType="XML"
            attributeName="cx"
            from="30" 
            to="60"
            dur="1s"
            repeatCount="1"
            fill="freeze"/>
    </svg>

    <svg viewBox="0 0 100 100" width="400" height="400">

        <circle cx="30" cy="30" r="10" fill="#f00">
            <animate 
                attributeType="XML"
                attributeName="cx"
                from="30" 
                to="60"
                dur="1s"
                repeatCount="1"
                fill="freeze"/>

            <animate 
                attributeType="XML"
                attributeName="cy"
                from="30" 
                to="60"
                dur="1s"
                repeatCount="1"
                fill="freeze"/>    
        </circle>

    </svg>

    <script src="index.js"></script>
  </body>
</html>
